how-to-create-web-server-html-esp8266

در این مرحله در ابتدا یک صفحه HTML ساده را طراحی کرده که قصد داریم در وب سرور خود آن را نمایش دهیم. برای این امر به کمک یک نرم افزار ویرایش متن مانند Notepad یک فایل با نام Index.html درست کرده و محتویات زیر را در آن قرار می‎دهیم که یک صفحه بسیار ساده برای نمایش یک متن به کاربر ها است.

`<HTML>`

`<HEAD>`

`<TITLE>WebServer Test page</TITLE>`

`</HEAD>`

`<BODY>`

`<CENTER>`

`<B>Hello From My WebServer.... </B>`

`</CENTER>`

`</BODY>`

`</HTML>`

حال اگر صفحه ای که درست کرده اید را به کمک یک مرورگر باز کنید با تصویری مانند زیر رو به رو خواهید شد. این عملیات برای آن که اطمینان حاصل کنیم صفحه HTML ما برای نمایش در ESP8266 ویزگی های مد نظر ما را دارا است کمک بزرگی خواهد بود.

همانطور که در تصویر مشخص است ما قرار است تنها به کاربر هایی که به وب سرور ما وارد می‎شوند تنها یک پیام خوش آمد نشان دهیم که بسته به کار خود می‎توانید به کمک ایجاد یک صفحه HTML دلخواه قابلیت هایی بیشتر را به کاربران بدهید.

در این آموزش ما قصد داریم ESP8266 را به یک Access Point متصل کنیم و وب سرور را ایجاد کنیم که برای این امر مراحل زیر را باید سپری کنیم. مد نظر داشته باشید مراحل نوشته برنامه مرحله به مرحله توضیح داده شده است و در انتهای آموزش فایل کمال در اختیار شما قرار گرفته است.

ما در برنامه در سه خط اول توابع سرآمد برای استفاده از ESP8266 را فراخوانی کرده ایم که در زیر مشاهده می‎کنید.

`#include <ESP8266WiFi.h>`

`#include <WiFiClient.h>`

`#include <ESP8266WebServer.h>`

بعد از توابع سرآمد همانطور که گفتیم قرار است ESP8266 را به یک Access Point متصل کنیم که توسط دستور زیر می‎توانیم مشخصات این Access Point را وارد کنیم.

`const char* ssid = "your_ssid";`

`const char* password = "password";`

در کد های فوق به جای your_ssid نام Access Point خود و به جای password نیز کلمه عبور Access Point را وارد کنید. بعد از تعیین مشخصات Access Point باید یک وب سرور ایجاد کنیم که این عملیات توسط دستور زیر قابل پیاده سازی است.

`ESP8266WebServer server(80);`

در دستور فوق یک سرور با نام server ایجاد کرده ایم که روی پورت 80 کار خواهد کرد که پورت معمول برای HTTP است. این نام می‎تواند هر مقدار دلخواه شما باشد. اگر به جای 80 که در پرانتر قرار گرفته است عدد دیگری وارد کنید لازم است برای فراخوانی وب سرور این پورت را با : در انتهای آدرس وب سرور وارد کنید. فرض کنیم وب سرور ما روی آدرس 192.168.1.110 قرار گرفته است. اگر پورت را 80 گذاشته باشیم با وارد کردن این آدرس به وب سرور منتقل خواهیم شد اما اگر پورت را 80 قرار نداده اید و مثلا 81 است برای رفتن به وب سرور باید آدرس را به صورت 192.168.1.110:81 وارد گردد.

نکته : مد نظر داشته باشید نامی که در این مرحله برای سرور خود انتخاب کرده اید (در اینجا server) در تمامی مراحل بعد مورد استفاده قرار خواهد گرفت پس هر نامی در این مرحله انتخاب کردید در مراحل بعد نیز باید مورد استفاده قرار بگیرد.

مرحله بعد اتصال ESP8266 به شبکه WiFi است که این کار به کمک دستور زیر انجام می‎گیرد. مد نظر داشته باشید اگر شبکه شما به صورت Open است و کلمه عبور ندارد می‎توانید ورودی دوم این دستور را خالی گذاشته و فقط نام را وارد کنید. توجه داشته باشید این دستور به Access Point متصل می‎شود که در مراحل قبل مشخصات آن را وارد کرده ایم.

`WiFi.begin(ssid, password);`

بعد از این مرحله باید منتظر ماند تا ESP8266 به Access Point متصل گردد. برای این منظور از دستور WiFi.status() استفاده می‎کنیم که یکی از خروجی های جدول زیر را دارد.

از اسم هر کدام از متغییر ها کارایی آن مشخص است و همانطور که گفته شد ما نیاز دارم تا از اتصال به شبکه WiFi اطمینان حاصل کنیم پس خروجی این دستور برای کار ما باید WL_CONNECTED باشد که به کمک دستورات زیر این شرط را بررسی خواهیم کرد.

`while (WiFi.status() != WL_CONNECTED) {`

`delay(500);`

`Serial.print(".");`

`}`

همانطور که در دستورات فوق مشخص است تا زمانی که اتصال به شبکه انجام نشده است ما در این خط منتظر خواهیم ماند و هر 500 میلی ثانیه (نیم ثانیه) این شرط را بررسی کرده و یک کاراکتر “.”را نیز در ارتباط سریال چاپ می‎کنیم که یک دید بصری نیز از تلاش برای اتصال به شبکه داشته باشم.

بعد از اتصال به شبکه نیاز داریم تا IP وب سرور خود را داشته باشیم که به کمک دستور زیر می‎توان این IP را استخراج نمود.

`WiFi.localIP();`

در مرحله بعد Client ها با وارد کردن آدرس IP که مرحله قبل به دست آمده است قصد اتصال به وب سرور را دارند که چگونگی نمایش اطلاعات به هر Client توسط دستور زیر شکل می‎گیرد.

`server.on("/", handleRoot);`

همانطور که مشخص است برای هر صفحه موجود در وب سرور می‎توانید دستوری به این شکل داشته باشید. به عنوان مثال دستور فوق برای آدرس روت می‎باشد. مثلا اگر IP در مرحله قبل برابر 192.168.1.110 باشد و کاربر همین آدرس را وارد کند دستور فوق دستورات موجود در تابع handleRoot را اجرا کرده و به عنوان خروجی به Client نمایش خواهد داد. حال اگر بخواهیم صفحات دیگری نیز در وب سرور خود داشته باشیم می‎توانیم این کار را با چند بار فراخوانی این دستور انجام دهیم. مثلا اگر بخواهیم علاوه بر صفحه روت یک صفحه با نام Faranesh داشته باشیم به کمک دستور زیر می‎توانیم این عملیات را انجام دهیم.

`server.on("/Faranesh ", handleFaranesh);`

در دستور فوق اگر کاربر به آدرس 192.168.1.110/Faranesh برود تابع handleFaranesh اجرا شده و دستوراتی که ما در این تابع قرار داده ایم برای کاربر به نمایش در خواهد آمد.

حال باید وب سرور را آغاز کنیم که به کمک دستور زیر این کار انجام خواهد شد.

`server.begin();`

حال که سرور ما ایجاد شده است باید به کمک دستور زیر ورود Client ها و اتصال آن ها به وب سرور را کنترل می‎کنیم.

`server.handleClient();`

حال که تمامی مقدمات انجام شده است نوبت به آخرین مرحله یعنی نوشتن تابع handleRoot می‎رسد. همانطور که گفتیم ما قصد داریم یک صفحه HTML در در مرحله اول نوشتیم را به کاربرهایی که به وب سرور ما متصل می‎شوند نمایش دهیم. برای این کار در ابتدا باید اطمینان حاصل کنید فایل HTML شما دارای Comments نیست. بدین معنی که فایل HTML فاقد هر گونه متنی است که با کاراکتر های “//” غیر فعال گشته اند. بعد از اطمینان از این مورد محتوی صفحه HTML خود را به صورت زیر داخل یک هدر فایل (فایل با پسوند .h) با نام دلخواه ذخیره می‎کنیم. این نام می‎تواند مقداری مانند Index.h باشد.

`const char MAIN_page[] PROGMEM = R"=====(`

`<HTML>`

            `<HEAD>`

                                    `<TITLE>WebServer Test page</TITLE>`

            `</HEAD>`

`<BODY>`

            `<CENTER>`

                                    `<B>Hello From My WebServer....</B>`

            `</CENTER>`

`</BODY>`

`</HTML>`

`)=====";`

همانطور که مشخص می‎باشد در این قایل ما اطلاعات صفحه HTML را در داخل یک متغییر با نام MAIN_page ذخیره کرده ایم. حال این فایل را در مسیری قرار می‎دهیم که فایل اصلی برنامه ما قرار دارد. که در نهایت دو فایل به صورت زیر در کنار هم قرار می‎گیرند. فایل Index.h فایل هدر ما شامل صفحه HTML است و فایل Main.ino فایل اصلی برنامه است که بر روی ESP8266 آپلود خواهیم کرد.

بعد از آن که هدر فایل ما ساخته شد این هدر فایل را به کمک دستور include مانند توابع سرآمد دیگر به ابتدای برنامه اضافه می‎کنیم. حال تابع handleRoot را به صورت زیر در انتهای برنامه نوشته و بدین صورت صفحه HTML که در ابتدا نوشتیم برای کاربر هایی که به وب سرور ما متصل می‎شوند نمایش داده می‎شود.

`void handleRoot() {`

`String s = MAIN_page;`

`server.send(200, "text/html", s);`

`}`

همانطور که در دستورات فوق مشخص است در این تابع مقادیر MAIN_page که صفحه HTML ما است را در یک رشته با نام “s” ذخیره کرده ایم و سپس با دستور server.send این رشته را برای کاربرانی که به وب سرور متصل می‎شوند ارسال کرده ایم. پس به کمک این روش می‎توانیم صفحات HTML دلخواه خود را در وب سرور ESP8266 نمایش دهیم.

بعد از آپلود برنامه بر روی NodeMCU که در دوره ورود به دنیای اینترنت اشیا با ESP8266 در مورد آن توضیح داده شده است نوبت به تست نتایج کار می‎رسد. در ابتدا ماژول تلاش می‎کند به شبکه WiFi متصل شود. بعد از انجام اتصال آدرس IP وب سرور را در اختیار ما قرار می‎دهد که در تصویر زیر می‎بینید.

همانطور که در تصویر مشخص است ماژول ابتدا به Access Point ما که در اینجا Masoud Phone است متصل شده است و بعد از آن نیز IP را در اختیار ما قرار داده است. حال اگر این آدرس IP را در سیستمی وارد کنیم که با ESP8266 در یک شبکه قرار گرفته باشد با صفحه HTML مورد نظر رو به رو خواهیم شد که در تصویر زیر مشاهده می‎کنید.

همانطور که در تصویر مشخص است با رفتن به آدرس IP داده شده توسط ESP8266 ما به صفحه HTML طراحی شده منتقل شدیم که هدف کار این آموزش بوده است. در انتها هر گونه سوال و ابهامی در آموزش وجود دارد در قسمت نظرات تا حد امکان پاسخگوی شما دوستان خواهم بود.

برنامه نویسی - طراحی وب

ایجاد وب سرور با صفحه HTML به کمک ESP8266

منبع: فرانش

منبع: فرانش